<template>
  <t-modal
    title="查看"
    width="1048px"
    :visible="visible"
    @cancel="closeModal()"
    wrapClassName="add-modal-container"
    forceRender
    :footer="null"
  >
    <div class="curve-modal-body">
      <div class="form-container">
        <a-form-model ref="ruleForm" :model="form" :hideRequiredMark="true">
          <div class="sub-title">基本信息</div>
          <a-row :gutter="0">
            <!-- 任务名称 -->
            <a-col :span="12">
              <a-form-model-item label="任务名称">
                <a-input disabled v-model="form.name"> </a-input>
              </a-form-model-item>
            </a-col>
            <!-- 上级任务名称 -->
            <a-col :span="12">
              <a-form-model-item label="上级任务名称">
                <a-input disabled v-model="form.parentName"> </a-input>
              </a-form-model-item>
            </a-col>
            <!-- 节点等级 -->
            <a-col :span="12">
              <a-form-model-item label="节点等级">
                <a-input disabled v-model="form.nodeLevelDesc"> </a-input>
              </a-form-model-item>
            </a-col>
            <!-- 节点类型 -->
            <a-col :span="12">
              <a-form-model-item label="节点类型">
                <a-input disabled v-model="form.nodeTypeDesc"> </a-input>
              </a-form-model-item>
            </a-col>
            <!-- 计划开始时间 -->
            <a-col :span="12">
              <a-form-model-item label="计划开始时间">
                <a-input disabled v-model="form.planStartTime"> </a-input>
              </a-form-model-item>
            </a-col>
            <!-- 计划结束时间 -->
            <a-col :span="12">
              <a-form-model-item label="计划结束时间">
                <a-input disabled v-model="form.planEndTime"> </a-input>
              </a-form-model-item>
            </a-col>
            <!-- 周期(天) -->
            <a-col :span="12">
              <a-form-model-item label="周期(天)">
                <a-input disabled v-model="form.duration"> </a-input>
              </a-form-model-item>
            </a-col>
            <!-- 关键节点 -->
            <a-col :span="12">
              <a-form-model-item label="关键节点">
                <a-radio-group disabled v-model="form.major">
                  <a-radio :value="1"> 是 </a-radio>
                  <a-radio :value="2"> 否 </a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
          </a-row>

          <div class="sub-title" style="margin-top:20px;">
            前置任务
          </div>
        </a-form-model>
      </div>

      <div class="table-container">
        <vxe-table
          ref="xTable"
          border="inner"
          align="center"
          height="99%"
          :data="tableData"
          :column-config="{ resizable: true }"
          :scroll-y="{ enabled: true }"
          :scroll-x="{ enabled: true }"
          :loading="loading"
          :row-config="{ keyField: 'uuid' }"
          :edit-config="{ showAsterisk: true }"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column field="sourceTaskName" title="任务名称" min-width="200">
          </vxe-column>
          <vxe-column field="type" title="类型">
            <template slot-scope="scope">
              {{ getTypeName(scope.row.type) }}
            </template>
          </vxe-column>
          <vxe-column field="status" title="状态" width="100">
            <template slot-scope="scope">
              <span :class="[filterStatusClass(scope.row.status)]">{{
                filterStatusName(scope.row.status)
              }}</span>
            </template>
          </vxe-column>
          <vxe-column field="duration" title="间隔时间(天)"> </vxe-column>
        </vxe-table>
      </div>
    </div>
  </t-modal>
</template>

<script>
import {
  getConfigDetail,
  getConfigDetailDraft,
  getConfigDetailHistory,
} from "@/api/progressManage";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    operateType: {
      type: [String, Number],
      default: "",
    },
    versionInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    row: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      confirmLoading: false,
      form: {
        //上级任务
        parentName: undefined,
        //任务名称
        name: "",
        //周期
        duration: "",
        //节点等级
        nodeLevelDesc: undefined,
        //节点类型
        nodeTypeDesc: undefined,
        //计划开始时间
        planStartTime: "",
        //计划结束时间
        planEndTime: "",
        //关键节点
        major: "",
      },
      loading: false,
      tableData: [],
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getDetail();
        }
      },
      immediate: true,
    },
  },
  methods: {
    getConfigDetail,
    getConfigDetailDraft,
    getConfigDetailHistory,

    //类型名称
    getTypeName(type = "") {
      switch (type) {
        case "FS":
          return "完成-开始";

        case "SS":
          return "开始-开始";

        case "FF":
          return "完成-完成";

        case "SF":
          return "开始-完成";

        default:
          break;
      }
    },

    //详情
    getDetail() {
      return new Promise((resolve, reject) => {
        let { status = "" } = this.versionInfo;
        let { uuid, proCode } = this.row;
        let apiUrl = "";
        if (status == 4) {
          //正式
          apiUrl = "getConfigDetail";
        } else if (status == 5) {
          //历史
          apiUrl = "getConfigDetailHistory";
        } else {
          //草稿
          apiUrl = "getConfigDetailDraft";
        }
        this[apiUrl]({
          uuid,
          proCode,
        })
          .then((res) => {
            let { data } = res;
            this.form = {
              //上级任务
              parentName: data?.parentName,
              //任务名称
              name: data?.name,
              //节点等级
              nodeLevelDesc: data?.nodeLevelDesc,
              //节点类型
              nodeTypeDesc: data?.nodeTypeDesc,
              //周期
              duration: data?.duration,
              //计划开始时间
              planStartTime: data?.planStartTime,
              //计划结束时间
              planEndTime: data?.planEndTime,
              //关键节点
              major: data?.major,
            };
            let source = data?.predecessorList ?? [];
            this.tableData = source;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            reject();
          });
      });
    },
    //重置表单
    resetForm() {
      this.tableData = [];
      this.form = {
        //上级任务
        parentName: undefined,
        //任务名称
        name: undefined,
        //节点等级
        nodeLevelDesc: undefined,
        //节点类型
        nodeTypeDesc: undefined,
        //周期
        duration: undefined,
        //计划开始时间
        planStartTime: undefined,
        //计划结束时间
        planEndTime: undefined,
        //关键节点
        major: undefined,
      };
      this.$refs.ruleForm.resetFields();
    },
    //关闭弹窗
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },

    filterStatusClass(val) {
      switch (Number(val)) {
        case 1:
          return "default";
        case 2:
          return "warning";
        case 3:
          return "success";
        default:
          return "default";
      }
    },

    filterStatusName(val) {
      switch (Number(val)) {
        case 1:
          return "未开始";
        case 2:
          return "进行中";
        case 3:
          return "已完成";
        default:
          return "未开始";
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 0 !important;
  }
  .curve-modal-body {
    padding: 14px;
    box-sizing: border-box;
    height: 700px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .form-container {
      padding: 0 40px 0 0;
    }
    .ant-form-item {
      display: flex;
      .ant-form-item-label {
        flex-shrink: 0;
        width: 150px;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
        overflow: hidden;
      }
    }

    .sub-title {
      padding-left: 30px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 18px;
      color: #525a5d;
      position: relative;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &::after {
        content: "";
        width: 3px;
        height: 16px;
        background: #1890ff;
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
      }
      .ant-btn {
        margin-right: 0;
      }
    }
    .default {
      color: #8c8c8c;
    }
    .success {
      color: #4bc964;
    }
    .warning {
      color: #f07f17;
    }
    .table-container {
      flex: 1;
      overflow: hidden;
    }
  }
}
</style>
